<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>调色盘</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-alpha.1/echarts.js"></script>
  <script src="./theme/itcast.js"></script>
</head>

<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'), 'itcast')

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: 'ECharts 饼图示例',
        color: 'red'
      },
      tooltip: {},
      legend: {
        data: ['购物清单']
      },
      // 全局调色盘（会覆盖主题调色盘）
      color: ['red', 'green', 'blue', 'skyblue', 'purple'], 
      series: [{
        // 局部调色盘（覆盖全局调色盘）
        color: ['pink', 'yellow', 'black', 'orange', 'red'], 
        name: '购物清单',
        type: 'pie',
        label: {
          show: true,
          formatter: function (arg) {
            return (
              arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
            )
          }
        },
        // radius: ['50%', '75%'],
        selectedMode: 'single',
        data: [{
            name: '淘宝',
            value: 11231,
            itemStyle:{
              color: 'black'
            }
          },
          {
            name: '京东',
            value: 22673
          },
          {
            name: '唯品会',
            value: 6123
          },
          {
            name: '1号店',
            value: 8989
          },
          {
            name: '聚美优品',
            value: 6700
          }
        ]
      }]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  </script>
</body>

</html>